<template>
  <view :class="['vh100', { dark: theme == 'dark' }]">
    <!-- 币种 -->
    <view class="ptb20 bgPart plr20">
      <view
        class="bd_input ptb10 plr10 tc flex1 radius4"
        @click="showP = true"
      >
        <view class="flex between"
          ><!-- <text>{{$t('bind.cur_select')}}</text> -->
          <text>{{ $t('assets.cur_coin') }}</text>
          <text>{{ symbol }}</text></view
        >
      </view>
      <u-picker
        mode="selector"
        :default-selector="[0]"
        :confirm-text="confirmText"
        :cancel-text="cancelText"
        v-model="showP"
        :range="coinArr"
        @confirm="getSymbol"
        range-key="symbols"
      >
      </u-picker>
      <view class="ft18"></view>
      <view class="mt10"
        >{{ $t('trade.use') }} {{ available }} {{ symbol || '--' }} {{ $t('bico.W284') }}
        {{ feeNum || 0.0 }}%
      </view>
      <view class="mt10"
        >{{ $t('assets.mention') }} {{ $t('bico.W285') }} {{ minNumber }}{{ symbol || '--' }}
        {{ $t('bico.W286') }}{{ maxNumber }}{{ symbol || '--' }}</view
      >
      <view class="mt10"> {{ $t('bico.W287') }} {{ reciveNumber }}{{ symbol || '--' }}</view>
    </view>
    <view class="plr20">
      <view class="mb20 mt20">
        <!-- 地址 -->
        <view class="">{{ $t('assets.mentionaddr') }}</view>
        <input
          type="text"
          v-model="address"
          class="bdb1f h40 w100 input-uni"
          :placeholder="$t('assets.p_addr')"
        />
        <!-- <view class="" @click="scan1()">扫描</view> -->
      </view>
      <view class="mb20">
        <view class="">{{ $t('trade.num') }}</view>
        <view class="flex alcenter between bdb1f">
          <!-- 数量 -->
          <input
            type="digit"
            class="h40 flex1 input-uni"
            v-model="number"
            @input="numberChange"
            :placeholder="$t('assets.minnum') + (minNumber || '0.00')"
          />
          <view class="flex alcenter">
            <text class="blue ft14 pr10 bdr_white50">{{ symbol || '--' }}</text>
            <view
              class="pl10"
              @tap="all"
              >{{ $t('trade.all') }}</view
            >
          </view>
        </view>
      </view>
      <view class="mb20">
        <view class="">{{ $t('login.s_dealpwd') }}</view>
        <input
          type="text"
          password=""
          class="bdb1f h40 w100 input-uni"
          v-model="password"
          :placeholder="$t('login.e_pdeal')"
        />
      </view>

      <!-- <view class="mb10 bdb1f ptb10 flex alcenter between">
				<view class="">{{$t('assets.recivenum')}}</view>
				<view class="">{{reciveNumber}} {{coinInfo.name||'--'}}</view>
			</view> -->
      <!-- <view class="mb20 bdb1f ptb10 flex alcenter between" v-if="sign">
				<input type="text" v-model="code"  class="h40 lh40 flex1 input-uni" :placeholder="$t('login').p_mobilecode">
				<view><button size="mini" type="primary" :disabled="disable" :loading="load" @click="send(1)">{{codeText}}</button></view>
			</view> -->
      <view class="mb20 bdb1f ptb10 flex alcenter between">
        <input
          type="text"
          v-model="code2"
          class="h40 lh40 flex1 input-uni"
          :placeholder="$t('login').p_email"
		  disabled
        />
        <view
          ><button
            size="mini"
            type="primary"
            :disabled="disable2"
            :loading="load2"
            @click="send(2)"
          >
            {{ codeText2 }}
          </button></view
        >
      </view>
      <view class="mb20">
        <view class="">{{ $t('login.code') }}</view>
        <input
          type="text"
          password=""
          class="bdb1f h40 w100 input-uni"
          v-model="code"
          :placeholder="$t('bico.W147')"
        />
      </view>
      <!-- <view class="mb20">
				{{$t('trade.fee')}}：{{coinInfo.rate||'--'}}% {{coinInfo.name||'--'}}
			</view> -->

      <view
        class="mt40 bgBlue radius4 ptb10 white ft14 tc mb10"
        @tap="mention"
        >{{ $t('assets.mention') }}</view
      >
      <view class="mt10">
        <view class="mb5 colorr">
          <text class="t_tile">{{ $t('assets.t_title') }}:</text>
        </view>
        <view class="ft12 colorr">*{{ $t('assets.t_tip1') }}</view>
        <view class="mb5 ft12 colorr">*{{ $t('assets.t_tip2') }}</view>
        <view class="mb5 ft12 colorr">*{{ $t('assets.t_tip3') }}</view>
        <view class="mb5 ft12 colorr">*{{ $t('assets.t_tip4') }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import {
  commonAllCoin,
  withdrawPage,
  sendGmail,
  info,
  withdrawCoinApp
} from '../../common/apiString.js';
import { myMixins } from '@/common/myMixins.js';
export default {
  mixins: [myMixins],
  data() {
    return {
      showP: false,
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),
      sign: false,
      userInfo: {},
      password: '',
      currency: '',
      minPrice: 0,
      feeNum: 0,
      getFee: 0,
      available: 0, //可用
      maxNumber: 0,
      minNumber: 0,
      coinInfo: {},
      address: '',
      name: '',
      number: '',
      symbol: '',
      coinArr: [],
      reciveNumber: '0.0',
      code: '',
      code2: '',
      disable: false,
      load: false,
      codeText: this.$t('login').r_send,
      disable2: false,
      load2: false,
      codeText2: this.$t('login').r_send,
      accountNumber: '',
      timer: null
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: this.$t('assets').mention
    });
    this.$utils.setTheme(this.theme);
    this.currency = e.currency;
    this.name = e.name;
  },
  onShow() {
    this.getCoinInfo();
    this.getUserInfo();
  },
  onPullDownRefresh() {
    this.getCoinInfo();
    this.getUserInfo();
  },
  methods: {
    scan1() {
      let that = this;
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          that.address = res.result;
        }
      });
    },
    scan2() {
      let that = this;
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          that.result2 = res.result;
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        }
      });
    },
    scan3() {
      let that = this;
      // 调起条码扫描
      uni.scanCode({
        scanType: 'barCode',
        success: function (res) {
          that.result3 = res.result;
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        }
      });
    },
    getCoinInfo() {
      this.$utils.initDataToken(
        { url: commonAllCoin, data: { type: 'WITHDRAW' }, type: 'POST' },
        res => {
          this.coinArr = res;
          if (this.symbol == '') {
            this.symbol = this.coinArr[0].symbols;
          }
          //this.symbol = this.coinArr[0].symbols
          this.getBalance(this.symbol);
          //this.getUserInfo();
        }
      );
    },
    getSymbol(e) {
      console.log(e[0]);
      this.symbol = this.coinArr[e[0]].symbols;

      // if(this.symbol == 'USDT'){
      // 	this.chainName = this.tabBars[0].name;
      // }
      this.getBalance(this.symbol);
    },
    getBalance(type) {
      var that = this;
      this.$utils.initDataToken({ url: withdrawPage, data: { type: type } }, res => {
        that.minPrice = Number(res.min).toFixed(2); //最小
        that.feeNum = Number(res.fee); //手续费
        that.available = res.price; //可用
        that.minNumber = Number(res.minSection); //最小区间值
        that.maxNumber = Number(res.maxSection); //最大区间值
        console.log(res);
        //this.getUserInfo();
      });
    },
    getUserInfo() {
      this.$utils.initDataToken({ url: info, type: 'POST' }, res => {
        this.userInfo = res;
        this.code2 = res.email;
      });
    },
    getAddress(id) {
      this.$utils.getAddressOnline(
        {
          url: 'walletMiddle/GetDrawAddress',
          // url:'api/user/find',
          data: {
            user_id: id,
            coin_name: this.name,
            contract_address: this.coinInfo.contract_address ? this.coinInfo.contract_address : 0
          }
        },
        res => {
          uni.stopPullDownRefresh();
          console.log(res);
          // if(res.type=='ok'){
          // 	// this.address=res.data.address;
          // 	this.address=res.message.address
          // }
          if (res.code == 0) {
            this.address = res.data.address;
          } else {
            setTimeout(() => {
              this.$utils.showLayer(res.errorinfo);
            }, 100);
          }
        }
      );
    },
    all() {
      this.number = this.available;
      this.reciveNumber = this.available * (1 - this.feeNum / 100);
      if (this.number > 0) {
        this.sign = true;
      } else {
        this.sign = false;
      }
    },
    numberChange(e) {
      // 到账数量
      this.reciveNumber = e.target.value * (1 - this.feeNum / 100);
      if (e.target.value > 0) {
        this.sign = true;
      } else {
        this.sign = false;
      }
    },
    //发送验证码
    send(num) {
      var url = sendGmail;
      var data;
      if (num === 1) {
        data = {
          phone: this.userInfo.phone,
          code: this.userInfo.phoneCode,
          type: this.userInfo.area
        };
      } else if (num === 2) {
        data = {
          email: this.code2
        };
      }

      this.$utils.initDataToken({ url: url, data: data, type: 'post' }, (res, msg) => {
        if (num === 1) {
          this.disable = true;
          // this.load = true;
          var times = 120;
          var timer = setInterval(() => {
            times--;
            if (times < 10) {
              times = '0' + times;
            }
            this.codeText = times + 's';
            if (times <= 0) {
              clearInterval(timer);
              this.disable = false;
              this.load = false;
              this.codeText = this.$t('login').r_send;
            }
          }, 2000);
        }
        if (num === 2) {
          this.disable2 = true;
          // this.load = true;
          var times2 = 120;
          var timer2 = setInterval(() => {
            times2--;
            if (times2 < 10) {
              times2 = '0' + times2;
            }
            this.codeText2 = times2 + 's';
            if (times2 <= 0) {
              clearInterval(timer2);
              this.disable2 = false;
              this.load2 = false;
              this.codeText2 = this.$t('login').r_send;
            }
          }, 2000);
        }
      });
    },
    mention() {
      let that = this;
      if (!this.address) {
        return this.$utils.showLayer(this.$t('assets.p_addr'));
      }
      if (!this.number) {
        return this.$utils.showLayer(this.$t('assets.p_minnum'));
      }
      if (!this.password) {
        return this.$utils.showLayer(this.$t('login.e_pdeal'));
      }
      if (this.password.length < 6) {
        return this.$utils.showLayer(this.$t('login.e_pdealerr'));
      }
      if (!this.code) {
        return this.$utils.showLayer(this.$t('bico.W147'));
      }
      // if(!this.code){
      // 	return this.$utils.showLayer(this.$t('login').p_vcode);
      // }
      // if(!this.code2){
      // 	return this.$utils.showLayer(this.$t('login').p_vcode);
      // }
      // uni.showLoading()
      this.$utils.initDataToken(
        {
          url: withdrawCoinApp,
          type: 'get',
          data: {
            toAddress: this.address,
            type: this.symbol,
            price: this.number,
            payPwd: this.password,
            smsCode: this.code,
            // emailCode: this.code2,
            memoTagValue: ''
          }
        },
        (res, msg) => {
          // uni.hideLoading()
          // that.timer = clearInterval(that.timer);
          // that.timer2 =clearInterval(that.timer2);
          //console.log(res);
          setTimeout(() => {
            this.$utils.showLayer(this.$t('codeTxt.withdrawWait'));
            // this.disable = false;
            // this.load = false;
            // this.codeText = this.$t('login').r_send;
            // this.disable2 = false;
            // this.load2 = false;
            // this.codeText2 = this.$t('login').r_send;
          }, 100);

          setTimeout(() => {
            this.getCoinInfo();
          }, 2000);
        }
      );
    }
  }
};
</script>

<style>
.radius4 {
  border-radius: 4px;
  height: 45px;
  line-height: 30px;
}
.mb5 {
  margin-bottom: 5px;
}
.colorr {
  color: red;
}
.t_tile {
  line-height: 30px;
  font-size: 18px;
}
</style>
